import React, { useCallback, useState } from 'react'



// 默认的时候点击修改 count 会导致 Child 组件重新被渲染，可以通过 React.memo 这个
// 高阶组件解决无关组件重新渲染的问题
const Child = React.memo((props) => {

    console.log('Child 组件被执行了');

    return (<>
        <h1>Child -- {props.name}  </h1>
        <button onClick={() => {
            props.changeNameFn('小李')
        }}>修改名称</button>
    </>)
})

export default function App() {
    const [count, setCount] = useState(100)

    const [name, setName] = useState('小王')


    /*
        useCallback： 接收两个参数，会有一个返回值
        参数一：是一个函数，这个函数就是我们需要缓存的函数
        参数二：是一个依赖数组，只有依赖发生改变的时候才会重新执行
        返回值：是一个被缓存后的函数
        useCallback：用来缓存函数解决无关组件重复渲染
    */
    const changeName = useCallback((val) => {
        setName(val)
    }, [name])

    return (
        <div>
            <h1>App - {count}</h1>

            <button onClick={() => {
                setCount(count + 1)
            }}>点击增加</button>


            <hr />


            <Child name={name} changeNameFn={changeName} />
        </div>
    )
}
